/**
  @date: 2019年5月22日14:25:53
  @latest updates: 2019年7月2日10:58:53
  @author: liump
  @desc: 线路 点操作弹框组件
  @data: mock/amapWorkMessage.json
  @param type:
    工作内容级联需要的参数
    管道井	W-GDJ
    立杆	W-LG
    顶管	W-DG

    原有光交D-OGJ
    新立光交D-NGJ
    原有光分D-OGF
    新立光分D-NGF
    原有分光器D-OFGQ
    新立分光器D-NFGQ
    分光器 D-FGQ
    接头盒	W-JTH
    引上	W-YS
    盘留	W-PN
    光缆	W-GL
    
    熔接	W-RJ
    成端  W-CD
    
    新设墙壁架挂W-NQBJG
    原有墙壁架挂W-OQBJG
    新设光缆接头W-NGLJT
    引下W-YX
 */
<template>
  <el-card class="amap-line-work-dialog">
    <div slot="header" class="clearfix">
      <span>工作内容</span>
      <span @click="handleAddLineWork">
        <i class="el-icon-plus"></i>
        <span class="clearfix-add-work">添加内容</span>
      </span>
    </div>
    <!-- 光交弹框内容 Start -->
    <el-form v-show="pointType == 'D-OGJ'">
      <el-form-item v-for="(item, index) of lineWork_list" :key="item.id">
        <el-col :span="2">
          <el-button icon="el-icon-minus" circle size="mini" @click="handleSpliceLineWork(index)"></el-button>
        </el-col>
        <el-col :span="20">
          <el-cascader :options="options" @focus="handleChangeLine(index)" v-model="item.optionId"></el-cascader>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="8">请选择类型:</el-col>
        <el-col :span="16">
          <el-select v-model="img_type_label" placeholder="请选择">
            <el-option
              v-for="item in type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <img
                :src="item.img_url"
                alt
                style="vertical-align:middle;margin-left:10px;width:28px;height:28px;"
              >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLineWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleLineWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
    <!-- 光分弹框内容 -->
    <el-form v-show="pointType == 'D-OGF'">
      <el-form-item v-for="(item, index) of lineWork_list" :key="item.id">
        <el-col :span="2">
          <el-button icon="el-icon-minus" circle size="mini" @click="handleSpliceLineWork(index)"></el-button>
        </el-col>
        <el-col :span="20">
          <el-cascader :options="options" @focus="handleChangeLine(index)" v-model="item.optionId"></el-cascader>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="8">请选择类型:</el-col>
        <el-col :span="16">
          <el-select v-model="img_type_label" placeholder="请选择">
            <el-option
              v-for="item in type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <img
                :src="item.img_url"
                alt
                style="vertical-align:middle;margin-left:10px;width:28px;height:28px;"
              >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLineWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleLineWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
    <!-- 接头盒弹框内容 -->
    <el-form v-show="pointType == 'W-JTH'">
      <el-form-item v-for="(item, index) of lineWork_list" :key="item.id">
        <el-col :span="2">
          <el-button icon="el-icon-minus" circle size="mini" @click="handleSpliceLineWork(index)"></el-button>
        </el-col>
        <el-col :span="20">
          <el-cascader :options="options" @focus="handleChangeLine(index)" v-model="item.optionId"></el-cascader>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="8">请选择类型:</el-col>
        <el-col :span="16">
          <el-select v-model="img_type_label" placeholder="请选择">
            <el-option
              v-for="item in type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <img
                :src="item.img_url"
                alt
                style="vertical-align:middle;margin-left:10px;width:28px;height:28px;"
              >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLineWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleLineWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
    <!-- 引上弹框内容 -->
    <el-form v-show="pointType == 'W-YS'">
      <el-form-item v-for="(item, index) of lineWork_list" :key="item.id">
        <el-col :span="2">
          <el-button icon="el-icon-minus" circle size="mini" @click="handleSpliceLineWork(index)"></el-button>
        </el-col>
        <el-col :span="14">
          <el-cascader :options="options" @focus="handleChangeLine(index)" v-model="item.optionId"></el-cascader>
        </el-col>
        <el-col :span="3">长度:</el-col>
        <el-col :span="5">
          <el-input-number
            v-model="item.len"
            size="mini"
            :controls="false"
            class="input-number"
            :min="0"
            @blur="handleBlurNum(item)"
          ></el-input-number>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="8">请选择类型:</el-col>
        <el-col :span="16">
          <el-select v-model="img_type_label" placeholder="请选择">
            <el-option
              v-for="item in type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <img
                :src="item.img_url"
                alt
                style="vertical-align:middle;margin-left:10px;width:28px;height:28px;"
              >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLineWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleLineWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
    <!-- 盘留弹框内容 -->
    <el-form v-show="pointType == 'W-PN'">
      <el-form-item v-for="(item, index) of lineWork_list" :key="item.id">
        <el-col :span="2">
          <el-button icon="el-icon-minus" circle size="mini" @click="handleSpliceLineWork(index)"></el-button>
        </el-col>
        <el-col :span="6">长度:</el-col>
        <el-col :span="8">
          <el-input-number
            v-model="item.len"
            size="mini"
            :controls="false"
            class="input-number"
            :min="0"
          ></el-input-number>
        </el-col>
        <el-col :span="4">米</el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="8">请选择类型:</el-col>
        <el-col :span="16">
          <el-select v-model="img_type_label" placeholder="请选择">
            <el-option
              v-for="item in type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <img
                :src="item.img_url"
                alt
                style="vertical-align:middle;margin-left:10px;width:28px;height:28px;"
              >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLineWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleLineWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
    <!-- 引下弹框 -->
    <el-form v-show="pointType == 'W-YX'">
      <el-form-item v-for="(item, index) of lineWork_list" :key="item.id">
        <el-col :span="2">
          <el-button icon="el-icon-minus" circle size="mini" @click="handleSpliceLineWork(index)"></el-button>
        </el-col>
        <el-col :span="14">
          <el-cascader :options="options" @focus="handleChangeLine(index)" v-model="item.optionId"></el-cascader>
        </el-col>
        <el-col :span="3">长度:</el-col>
        <el-col :span="5">
          <el-input-number
            v-model="item.len"
            size="mini"
            :controls="false"
            class="input-number"
            :min="0"
            @blur="handleBlurNum(item)"
          ></el-input-number>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="8">请选择类型:</el-col>
        <el-col :span="16">
          <el-select v-model="img_type_label" placeholder="请选择">
            <el-option
              v-for="item in type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <img
                :src="item.img_url"
                alt
                style="vertical-align:middle;margin-left:10px;width:28px;height:28px;"
              >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLineWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleLineWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
    <!-- 墙壁架挂 -->
    <el-form v-show="pointType == 'W-QBJG'">
      <el-form-item v-for="(item, index) of lineWork_list" :key="item.id">
        <el-col :span="2">
          <el-button icon="el-icon-minus" circle size="mini" @click="handleSpliceLineWork(index)"></el-button>
        </el-col>
        <el-col :span="14">
          <el-cascader :options="options" @focus="handleChangeLine(index)" v-model="item.optionId"></el-cascader>
        </el-col>
        <el-col :span="3">长度:</el-col>
        <el-col :span="5">
          <el-input-number
            v-model="item.len"
            size="mini"
            :controls="false"
            class="input-number"
            :min="0"
            @blur="handleBlurNum(item)"
          ></el-input-number>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="8">请选择类型:</el-col>
        <el-col :span="16">
          <el-select v-model="img_type_label" placeholder="请选择">
            <el-option
              v-for="item in type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <img
                :src="item.img_url"
                alt
                style="vertical-align:middle;margin-left:10px;width:28px;height:28px;"
              >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLineWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleLineWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'amaplineWorkDialog',
  props: {
    point_id: Number,
    changeToolsIndex: Number
  },
  data() {
    return {
      // 级联树形结构
      options: [
        {
          label: '打手井',
          value: 1,
          children: [
            {
              label: '埋式',
              value: 54,
              children: [
                {
                  label: '6芯',
                  value: 1007
                }
              ]
            }
          ]
        },
        {
          label: '开挖PVC110管',
          value: 2,
          childred: []
        }
      ],
      // 工作内容集合
      lineWork_list: [
        {
          id: 0,
          optionId: [], // 工作内容的对应的 optionId
          workMessage: [], // 工作内容文本
          len: 0, // 长度,默认0
          num: 1, // 数量,默认1
          tableShowNum: 1, // 在表格中显示的数量,这个字段是在数量为0的时候,显示长度,用于渲染的字段
          unit: []
        }
      ],
      index: 0, // 当前行的序列
      type_list: [], // 图标类型选择的数组
      img_type_label: '', // 图片类型文本
      pointType: '' // 根据菜单类型切换弹框内容
    }
  },
  methods: {
    /**
     * 弹框中删除按钮的方法
     * @date 2019年6月17日11:16:18
     * @author liump
     * @method handleSpliceLineWork
     * @param { Number } index 数组下标
     */
    handleSpliceLineWork(index) {
      this.lineWork_list.splice(index, 1)
    },
    /**
     * 获取工作内容的行序号(下标)
     * @method handleChangeLine
     * @param {Number} index 行数据的序列
     */
    handleChangeLine(index) {
      this.index = index
    },
    /**
     * 弹框中添加内容按钮点击事件
     * @method handleAddLineWork
     */
    handleAddLineWork() {
      let len = this.lineWork_list.length
      let obj = {
        id: len,
        optionId: [],
        workMessage: [],
        len: 0,
        num: 1,
        tableShowNum: 1,
        unit: []
      }
      this.lineWork_list.push(obj)
    },
    /**
     * 初始化数组,用于在弹框开启的时候清空数据
     * @method handleInitData
     */
    handleInitData() {
      let obj = {
        id: 0,
        optionId: [],
        workMessage: [],
        len: 0,
        num: 1,
        tableShowNum: 1,
        unit: []
      }
      this.lineWork_list = []
      this.lineWork_list.push(obj)
      // 初始化图标类型选择
      // this.type_list = []
    },
    /**
     * 父组件调用子组件的方法,通知子组件当前是什么菜单(如:)
     * @method handleChangeImg
     * @param { String } img_type 接收菜单类型参数,用于切换图标选择类型数组
     */
    handleChangeImg(img_type) {
      let type_list
      switch (img_type) {
        case 'D-OGJ':
          type_list = [
            {
              value: 'D-OGJ',
              label: '原有落地光缆交接箱',
              img_url: '/static/amap/d_ogj.png'
            },
            {
              value: 'D-NGJ',
              label: '新设落地光缆交接箱',
              img_url: '/static/amap/d_ngj.png'
            }
          ]
          break
        case 'D-OGF':
          type_list = [
            {
              value: 'D-OGF',
              label: '原有光缆分线箱',
              img_url: '/static/amap/d_ogf.png'
            },
            {
              value: 'D-NGF',
              label: '新装光缆分线箱',
              img_url: '/static/amap/d_ngf.png'
            }
          ]
          break
        case 'W-JTH':
          type_list = [
            {
              value: 'W-JTH',
              label: '接头盒',
              img_url: '/static/amap/w_njth.png'
            }
          ]
          break
        case 'W-YS':
          type_list = [
            {
              value: 'W-YS',
              label: '引上',
              img_url: '/static/amap/w_ys.png'
            }
          ]
          break
        case 'W-PN':
          type_list = [
            {
              value: 'W-PN',
              label: '盘留',
              img_url: '/static/amap/w_pn.png'
            }
          ]
          break
        case 'W-YX':
          type_list = [
            {
              value: 'W-YX',
              label: '引下',
              img_url: '/static/amap/w_yx.png'
            }
          ]
          break
        case 'W-QBJG':
          type_list = [
            {
              value: 'W-NQBJG',
              label: '新设墙壁加挂',
              img_url: '/static/amap/w_nqbjg.png'
            },
            {
              value: 'W-OQBJG',
              label: '旧设墙壁加挂',
              img_url: '/static/amap/w_oqbjg.png'
            }
          ]
          break

        default:
          type_list = []
          break
      }
      this.type_list = type_list
    },
    /**
     * 确认按钮,向父组件传递数据的方法
     * @method handleLineWorkConfirm
     */
    handleLineWorkConfirm() {
      // 遍历树形结构找到单位 unit
      let getUnit = (data, optionId, unit) => {
        for (var i in data) {
          if (data[i].value == optionId) {
            unit.push(data[i].unit)
            break
          } else {
            getUnit(data[i].children, optionId, unit)
          }
        }
      }

      // 通过 optionId 获得 工作内容文本
      this.lineWork_list.forEach((el, index) => {
        // 遍历树形结构找到optionId对应的工作内容文本,并对 workMessage 赋值
        el.optionId.forEach(elem => {
          this.getArray(this.options, elem, el.workMessage)
        })

        // 根据工作内容级联的最后一级找到最后一级对应的单位
        let perentId = el.optionId[el.optionId.length - 1]
        getUnit(this.options, perentId, el.unit)

        // 根据不同类型的弹框处理 数量/长度,光交/光分/接头盒长度默认为0,数量默认为1,引上的长度自定义默认0数量0,盘留无工作内容级联长度自定义默认0数量0.
        switch (this.pointType) {
          case 'D-OGJ':
            // 光交箱无长度,表格的数量列显示数量
            el.tableShowNum = el.num
            break
          case 'D-OGF':
            // 光分箱无长度,表格的数量列显示数量
            el.tableShowNum = el.num
            break
          case 'W-JTH':
            // 接头盒无长度,表格的数量列显示数量
            el.unit = ['个']
            el.tableShowNum = el.num
            break
          case 'W-YS':
            // 引上无数量默认0,表格的数量列显示长度
            el.num = 0
            el.unit = ['米']
            el.tableShowNum = parseInt(el.len)
            break
          case 'W-YX':
            // 引下无数量默认0,表格的数量列显示长度
            el.num = 0
            el.unit = ['米']
            el.tableShowNum = parseInt(el.len)
            break
          // TODO: 墙上架挂
          case 'W-QBJG':
            // 引下无数量默认0,表格的数量列显示长度
            el.num = 0
            el.unit = ['米']
            el.tableShowNum = parseInt(el.len)
            break
          case 'W-PN':
            // 盘留无数量无工作量,表格的数量列显示长度
            el.num = 0
            el.unit = ['米']
            el.tableShowNum = parseInt(el.len)
            break
          default:
            break
        }
      })

      let data = {
        point_id: this.point_id,
        lineWork_list: this.lineWork_list,
        img_type: this.img_type_label,
        confirm: true,
        show: false
      }
      this.type_list = []
      this.img_type_label = ''
      this.$emit('handleLineWorkConfirm', data)
    },
    /**
     * 取消按钮,向父组件传值的方法
     */
    handleLineWorkCancel() {
      let data = {
        point_id: this.point_id,
        confirm: false,
        show: false
      }
      this.$emit('handleLineWorkCancel', data)
      this.type_list = []
      this.img_type_label = ''
    },
    /**
     * 遍历树形结构,根据树形结构找到指定的工作内容文本
     * @method getArray
     * @param { Array } data 要遍历的树形数组
     * @param { String } optionId 指定条件
     * @param { Array } list 工作内容数组,向该数组中 push 工作内容
     */
    getArray(data, optionId, list) {
      for (var i in data) {
        if (data[i].value == optionId) {
          // 在 workMessage 数组中添加 label
          list.push(data[i].label)
          break
        } else {
          this.getArray(data[i].children, optionId, list)
        }
      }
    },
    /**
     * 请求工作内容级联数据
     * @method getLineWorkData
     */
    getLineWorkData(pointType) {
      let success = res => {
        res = res.data
        if (res.flag == 1) {
          let data = res.data
          this.options = res.data
        }
        // this.options = res.data // 测试的模拟数据
      }
      let error = res => {}
      let data = {
        iconType: pointType
      }
      let param = {
        url: '/api/web/ptwo/getWorkOptRela',
        methods: 'post',
        data: data,
        success: success,
        error: error
      }
      this.$https(param)
      // mock的模拟数据
      // this.$axios.get("/mock/amapWorkMessage.json")
      //   .then(res => {
      //     success(res);
      //   });
    },
    /**
     * 获取类型用于切换不同种类的弹框
     */
    handleChangeLineDialog(pointType) {
      this.pointType = pointType
    },
    /**
     * 当数量失去焦点的时候如果没有值补全值
     * @method handleBlurNum
     * @author liump
     * @param { Object } item 改变的元素
     */
    handleBlurNum(item) {
      if (!item.num) {
        item.num = 0
      }
    }
  },
  mounted() {
    // this.getLineWorkData()
  }
}
</script>

<style scoped>
.amap-line-work-dialog {
  width: 300px;
  z-index: 100;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 12px;
}
.clearfix {
  display: flex;
  justify-content: space-between;
}
.clearfix span:nth-child(2) {
  cursor: pointer;
}
.clearfix-add-work {
  margin-left: 2px;
}
.amap-line-work-dialog .input-number {
  width: 100%;
}
</style>

<style>
/* 弹框样式修改 */
/* 弹框card 内边距 */
.amap-line-work-dialog .el-card__body {
  padding: 8px;
}
/* 删除工作内容按钮 */
.amap-line-work-dialog .el-button--mini.is-circle {
  padding: 3px;
}
/* 调整每行的外边距 */
.amap-line-work-dialog .el-form-item {
  margin-bottom: 6px;
}
/* 调整确认取消按钮 */
.amap-line-work-dialog .el-button {
  padding: 6px 18px;
  font-size: 12px;
}
.amap-line-work-dialog .el-input__inner,
.amap-line-work-dialog .el-cascader .el-input__inner {
  height: 30px;
}
.amap-line-work-dialog .el-col {
  font-size: 12px;
}
.amap-line-work-dialog .item_input > input {
  padding: 0;
  text-align: center;
}
</style>


